<template>
  <!--Menu List-->
  <div class="app-container">
    <div class="filter-container">
      <el-button class="filter-item" type="info" icon="el-icon-refresh" @click="handleFilter">
        Refresh
      </el-button>
      <el-button v-if="addBtnRights" class="filter-item" type="primary" icon="el-icon-plus" @click="handleAdd(null)">
        Add
      </el-button>
    </div>
    <div class="menu-list-container">
      <el-tree :data="menusRights" node-key="rule_id" :expand-on-click-node="true">
        <span slot-scope="{ node, data }" class="custom-tree-node">
          <span>{{ data.title }}</span>
          <span>{{ data.route_name }}</span>
          <span>{{ data.redirect_url }}</span>
          <span>{{ data.route_path }}</span>
          <span>{{ data.post_url }}</span>
          <span>
            <el-button v-if="addBtnRights" type="primary" icon="el-icon-plus" size="mini" @click.stop="handleAdd(data)" />
            <el-button v-if="editBtnRights" type="warning" icon="el-icon-edit" size="mini" @click.stop="handleEdit(data)" />
            <el-button v-if="delBtnRights" type="danger" icon="el-icon-delete" size="mini" @click.stop="handleDel(data)" />
          </span>
        </span>
      </el-tree>
    </div>
    <!--edit-form-->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :model="temp" label-position="left" label-width="100px" style="width: 500px; margin-left:50px;">
        <el-form-item label="Parent">
          <el-tree-select ref="treeSelect" v-model="temp.pid" :selectParams="selectParams" :treeParams="treeParams" @node-click="menuItemChange" />
        </el-form-item>
        <el-form-item label="Route Name" prop="route_name">
          <el-input v-model="temp.route_name" placeholder="Route Name" />
        </el-form-item>
        <el-form-item label="Route Path" prop="route_path">
          <el-input v-model="temp.route_path" placeholder="Route Path" />
        </el-form-item>
        <el-form-item label="Redirect" prop="route_redirect">
          <el-input v-model="temp.route_redirect" placeholder="Redirect Path" />
        </el-form-item>
        <el-form-item label="Title" prop="title">
          <el-input v-model="temp.title" placeholder="Title" />
        </el-form-item>
        <el-form-item label="ICON Name" prop="icon">
          <el-input v-model="temp.icon" placeholder="ICON Name" />
        </el-form-item>
        <el-form-item label="Post Path" prop="post_path">
          <el-input v-model="temp.post_path" placeholder="Post Path" />
        </el-form-item>
        <el-form-item label="Enabled" prop="enabled">
          <el-switch v-model="temp.enabled" active-value="1" inactive-value="0" active-color="#13ce66" inactive-color="#ff4949" @change="changeEnabled($event)" />
        </el-form-item>
        <el-form-item label="Menu Type" prop="is_menu">
          <el-switch v-model="temp.is_menu" active-value="1" inactive-value="0" active-color="#13ce66" inactive-color="#ff4949" style="display: block;margin-top: 10px;" active-text="Menu" inactive-text="Operate" @change="changeMenuType($event)" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          Cancel
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
          Confirm
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { createMenu, updateMenu, delMenu } from '@/api/menu'
import { checkBtnAuth } from '@/utils/auth'
export default {
  name: 'MenuList',
  data() {
    return {
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: 'Edit',
        create: 'Create'
      },
      temp: {
        rule_id: undefined,
        pid: 0,
        route_name: '',
        route_path: '',
        route_redirect: '',
        post_url: '',
        title: '',
        icon: '',
        is_menu: 1,
        enabled: 0
      },
      styles: {
        width: '600px'
      },
      selectParams: {
        clearable: false,
        placeholder: 'No Parent'
      },
      treeParams: {
        clickParent: true,
        'render-content': this._renderFun,
        data: [],
        props: {
          children: 'children',
          label: 'title',
          disabled: 'disabled',
          value: 'rule_id'
        }
      },
      addBtnRights: false,
      editBtnRights: false,
      delBtnRights: false
    }
  },
  computed: {
    ...mapGetters([
      'menusRights'
    ])
  },
  mounted() {
    //
    this.addBtnRights = checkBtnAuth('/menu/create')
    this.delBtnRights = checkBtnAuth('/menu/del')
    this.editBtnRights = checkBtnAuth('/menu/update')
  },
  methods: {
    handleFilter() {
      //
    },
    handleAdd(row) {
      this.resetTmp()
      //
      this.dialogFormVisible = true
      this.dialogStatus = 'create'
      if (row !== null) {
        this.data.temp.pid = row.rule_id
      }
      this.$nextTick(() => {
        // Get Menu List
        var data = this.$store.getters.menusRights
        this.treeParams.data = data
        this.$refs.treeSelect.treeDataUpdateFun(this.treeParams.data)
      })
    },
    handleEdit(row) {
      //
      this.dialogFormVisible = true
      this.dialogStatus = 'update'
      this.temp = Object.assign({}, row)
      //
      this.$nextTick(() => {
        // Get Menu List
        var data = this.$store.getters.menusRights
        this.treeParams.data = data
        this.$refs.treeSelect.treeDataUpdateFun(this.treeParams.data)
      })
    },
    handleDel(row) {
      //
      delMenu(row.rule_id).then(response => {
        const { code, msg } = response
        if (code === 100000) {
          this.$notify({
            title: 'Success',
            message: msg,
            type: 'success',
            duration: 2000
          })
          // this.handleFilter()
        } else {
          this.$message({
            message: msg,
            type: 'error'
          })
        }
      })
    },
    resetTmp() {
      this.temp = {
        rule_id: undefined,
        pid: 0,
        route_name: '',
        route_path: '',
        route_redirect: '',
        post_url: '',
        title: '',
        icon: '',
        is_menu: 1,
        enabled: 0
      }
    },
    changeEnabled(newValue) {
      this.data.temp.enabled = newValue === true ? 1 : 0
    },
    changeMenuType(newValue) {
      this.data.temp.is_menu = newValue === true ? 1 : 0
    },
    menuItemChange(newValue) {
      console.log(newValue)
    },
    createData() {
      // Create User
      createMenu(this.temp).then(response => {
        const { code, msg } = response
        if (code === 100000) {
          this.$notify({
            title: 'Success',
            message: msg,
            type: 'success',
            duration: 2000
          })
          this.resetTmp()
          // this.handleFilter()
          this.dialogFormVisible = false
        } else {
          this.$message({
            message: msg,
            type: 'error'
          })
        }
      })
    },
    updateData() {
      // Create User
      updateMenu(this.temp).then(response => {
        const { code, msg } = response
        if (code === 100000) {
          this.$notify({
            title: 'Success',
            message: msg,
            type: 'success',
            duration: 2000
          })
          this.resetTmp()
          // this.handleFilter()
          this.dialogFormVisible = false
        } else {
          this.$message({
            message: msg,
            type: 'error'
          })
        }
      })
    },
    // 自定义render
    _renderFun(h, { node, data, store }) {
      return (
        <span class='custom-tree-node'>
          <span>{node.label}</span>
        </span>
      )
    }
  }
}
</script>
<style scoped>
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    padding-right: 8px;
  }
  .el-tree >>> .el-tree-node{
    margin: 5px 0px;
  }
</style>
